<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParam.appid" placeholder="appid" clearable class="filter-item form-search-input" />
      <el-button class="filter-item search" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
        重置
      </el-button>
      <el-button class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreate()">
        新增
      </el-button>
      <el-button class="filter-item" icon="el-icon-refresh" @click="toAuth">
        扫码授权（回跳页）
      </el-button>
      <el-button v-if="this.selectedIds.length" size="small" class="filter-item mb-5" type="danger" icon="el-icon-delete" @click="handleMultiDelete">
        批量删除
      </el-button>
    </div>
    <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit @selection-change="handleSelectMulti">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name"   label="应用名称" />
      <el-table-column prop="appid"   label="appid" />
      <el-table-column prop="appsecret"   label="appsecret" />
      <el-table-column prop="aeskey"   label="encodingAesKey" />
      <el-table-column prop="token"   label="token" />
      <el-table-column prop="status"   label="状态" />
      <el-table-column prop="creator" label="创建人" />
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column prop="updated_at" label="更新时间" />
      <el-table-column label="操作">
        <template slot-scope="module">
          <el-button type="primary" icon="el-icon-edit" @click="handleUpdate(module.row)" />
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(module.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginate.current"
            hide-on-single-page
            :page-sizes="paginate.sizes"
            :page-size="paginate.limit"
            :layout="paginate.layout"
            :total="paginate.total"/>
    <!----------------------------------- 编辑 ---------------------------------------------->
    <el-dialog :title="title" :visible.sync="formVisible" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
        <el-form-item label="应用名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formFieldsData.name" placeholder="请输入应用名称" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="帐号类型" :label-width="formLabelWidth" prop="typedata">
          <el-select v-model="formFieldsData.typedata" placeholder="请选择帐号类型" >
            <el-option v-for="(item, key) in selectTypes" :key="key" :label="item" :value="key"/>
          </el-select>
        </el-form-item>
        <el-form-item label="appid" :label-width="formLabelWidth" prop="appid">
          <el-input v-model="formFieldsData.appid" placeholder="请输入appid" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="appsecret" :label-width="formLabelWidth" prop="appsecret">
          <el-input v-model="formFieldsData.appsecret" placeholder="请输入appsecret" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="encodingAesKey" :label-width="formLabelWidth" prop="aeskey">
          <el-input v-model="formFieldsData.aeskey" placeholder="请输入encodingAesKey" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="token" :label-width="formLabelWidth" prop="token">
          <el-input v-model="formFieldsData.token" placeholder="请输入token" autocomplete="off" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import formOperate from '@/layout/mixin/formOperate'
  import { parseTime } from '@/utils'

  export default {
    mixins: [formOperate],
    data() {
      return {
        formName: 'applet',
        formLabelWidth: '120px',
        // appid搜索
        queryParam: {
          appid: '',
        },
        formVisible: false,
        formFieldsData: {
          name: '',
          typedata:'serv_account',
          appid: '',
          appsecret: '',
          aeskey: '',
          token: '',
        },
        url: 'applet',
        // 帐号类型
        selectTypes: {
          'serv_account': '服务号',
          'miniapp': '小程序',
          'sub_account': '订阅号',
          'work_account': '企业微信',
          'web': '网站应用',
          'app': '移动应用'
        },
        // 表单验证
        rules: {
          name: [
            { required: true, message: '请输入应用名称', trigger: 'blur' }
          ],
          appid: [
            { required: true, message: '请输入appid' }
          ],
          typedata: [
            { required: true, message: '请选择应用类型' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'avatar',
        'roles',
        'email',
        'token',
        'user_id'
      ])
    },
    // 初始化数据,授权回调后服务端处理授权数据
    mounted() {
      const params = {
        auth_code: this.$route.query.auth_code,
        expires_in: 3600,
        creator_id: this.user_id
      }
      this.$http.post('component/getauthorization',params).then(response => {
        console.log(response)
        this.$message.success(response.msg)
      })
    },
    methods: {
      toAuth() {
        window.open(process.env.VUE_APP_BASE_API + '/component/authorize')  //TODO:根据项目获取地址
      }

    }
  }
</script>
